<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom1" style="height: 150px;"></div>
    </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
export default {
    data() {
        return {
            title: '服务事项概览',
            srverData: []
        }
    },
    methods: {
        loadSeverDual() {
            const serviceTypeData = [
                { time: '1月', value: 350, type: '咨询类' },
                { time: '2月', value: 420, type: '咨询类' },
                { time: '3月', value: 380, type: '咨询类' },
                { time: '4月', value: 520, type: '咨询类' },
                { time: '5月', value: 480, type: '咨询类' },
                { time: '1月', value: 120, type: '投诉类' },
                { time: '2月', value: 180, type: '投诉类' },
                { time: '3月', value: 150, type: '投诉类' },
                { time: '4月', value: 220, type: '投诉类' },
                { time: '5月', value: 190, type: '投诉类' },
                { time: '1月', value: 80, type: '维修类' },
                { time: '2月', value: 150, type: '维修类' },
                { time: '3月', value: 120, type: '维修类' },
                { time: '4月', value: 180, type: '维修类' },
                { time: '5月', value: 160, type: '维修类' },
                { time: '1月', value: 50, type: '建议类' },
                { time: '2月', value: 90, type: '建议类' },
                { time: '3月', value: 70, type: '建议类' },
                { time: '4月', value: 110, type: '建议类' },
                { time: '5月', value: 85, type: '建议类' },
            ];

            const satisfactionData = [
                { time: '1月', 满意度: 88 },
                { time: '2月', 满意度: 92 },
                { time: '3月', 满意度: 85 },
                { time: '4月', 满意度: 94 },
                { time: '5月', 满意度: 91 },
            ];

            const dualAxes = new DualAxes(this.$refs.bottom1, {
                data: [serviceTypeData, satisfactionData],
                xField: 'time',
                yField: ['value', '满意度'],
                geometryOptions: [
                    {
                        geometry: 'column',
                        isStack: true,
                        seriesField: 'type',
                        color: ['#1890ff', '#fa8c16', '#52c41a', '#f5222d'],
                        // 柱状图中间部分设置不透明度0.5
                        style: {
                            opacity: 0.5
                        },
                        label: {
                            position: 'top',
                            formatter: (datum) => `${datum.value}`,
                            style: {
                                fill: 'white',
                                opacity: 1
                            }
                        }
                    },
                    {
                        geometry: 'line',
                        // 折线图中间线条设置不透明度0.5
                        style: {
                            opacity: 0.5
                        },
                        color: '#722ed1',
                        point: {
                            size: 6,
                            shape: 'circle',
                            style: { 
                                fill: '#722ed1', 
                                strokeWidth: 2,
                                opacity: 1 // 点保持不透明度1
                            }
                        },
                        label: {
                            position: 'top',
                            formatter: (datum) => `${datum.满意度}分`,
                            style: { 
                                fill: 'white',
                                opacity: 1 
                            }
                        }
                    }
                ],
                legend: {
                    position: 'bottom',
                    layout: 'horizontal',
                    justifyContent: 'center',
                    items: [
                        { name: '咨询类', value: '咨询类', marker: { symbol: 'square', fill: '#1890ff' } },
                        { name: '投诉类', value: '投诉类', marker: { symbol: 'square', fill: '#fa8c16' } },
                        { name: '维修类', value: '维修类', marker: { symbol: 'square', fill: '#52c41a' } },
                        { name: '建议类', value: '建议类', marker: { symbol: 'square', fill: '#f5222d' } },
                        { name: '满意度', value: '满意度', marker: { symbol: 'circle', fill: '#722ed1' } }
                    ],
                    itemName: {
                        style: {
                            fill: 'white',
                            opacity: 1 // 保持不透明度1
                        }
                    }
                },
                xAxis: {
                    label: {
                        style: {
                            fill: 'white',
                            opacity: 1 // 保持不透明度1
                        }
                    }
                },
                yAxis: [
                    {
                        name: '服务数量',
                        nameStyle: {
                            fill: 'white',
                            opacity: 1 // 保持不透明度1
                        },
                        label: {
                            style: {
                                fill: 'white',
                                opacity: 1 // 保持不透明度1
                            }
                        }
                    },
                    {
                        name: '满意度(分)',
                        nameStyle: {
                            fill: 'white',
                            opacity: 1 // 保持不透明度1
                        },
                        min: 80,
                        max: 100,
                        label: {
                            formatter: (v) => `${v}分`,
                            style: {
                                fill: 'white',
                                opacity: 1 // 保持不透明度1
                            }
                        }
                    }
                ],
                tooltip: {
                    formatter: (datum) => {
                        if (datum.type) {
                            return { name: datum.type, value: `${datum.value} 件` };
                        }
                        return { name: '满意度', value: `${datum.满意度} 分` };
                    }
                }
            });

            dualAxes.render();
        }
    },
    mounted() {
        this.loadSeverDual();
    }
}
</script>
<style scoped></style>